<%--
    Document   : manageproduct
    Created on : Sep 17, 2013, 6:48:55 AM
    Author     : Tùng
--%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link type="text/css" href="css/manage.css" rel="stylesheet">
        <link type="text/css" href="css/bootstrap.css" rel="stylesheet">
        <link type="text/css" href="css/index.css" rel="stylesheet">
        <link type="text/css" href="css/chart.css" rel="stylesheet">
        <link type="text/css" href="css/tab.css" rel="stylesheet">
        <link type="text/css" href="css/chart-print.css" rel="stylesheet">
        <link type="text/css" href="css/table.css" rel="stylesheet">
        <script src="js/table.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/modernizr.min.js"></script>


        <script type="text/javascript" src="js/raphael.js"></script>
        <script type="text/javascript" src="js/popup.js"></script>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/analytics.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
        <script type="text/javascript" src="js/underscore-min.js"></script>
        <script type="text/javascript" src="js/backbone-min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/transition.js"></script>
        <script type="text/javascript" src="js/all.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/6a4ae20ef44d.js"></script>



        <title>Product Page</title>
        <c:if test="${not empty sessionScope.SHOWPRODUCTDETAIL}">
            <script type="text/javascript">
                $(function popuptracking() {
                    $("#dialog-modal").dialog({
                        minHeight: 350,
                        minWidth: 800,
                        modal: true,
                        title: "Product tracking",
                        close: function(){
                            $("#main1").removeClass("ui-widget-overlay ui-front");
                        }
                    });

                    $("#main1").addClass("ui-widget-overlay ui-front");
                });
            </script>
        </c:if>

        <c:if test="${empty sessionScope.ACCOUNT}">
            <c:redirect url="login.jsp"/>
        </c:if>
        <style type="text/css" media="screen">
            #holder {
                height: 250px;
                margin: 50px 0px -50px -415px;
                width: 800px;
            }
        </style>

    </head>
    <body>
        <div id="main1">
            <div id="fixed-header" class="navbar-fixed-top row" style="width: 100%;">
                <div id="menu" class="row">
                    <div id="menu-inner">
                        <div id="messages"></div>
                        <div id="menu-left" class="col-5">
                            <div id="dd-left" class="col-1 text-left">
                                <a data-toggle="dropdown" style="margin-top:20px" class="btn btn-disabled dropdown-toggle"><i class="icon-menu"></i></a>
                                <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
                                    <li class="caret-up"></li>
                                    <li> <a href="CollectionController?btAction=LoadAllCollection">Collection</a></li>
                                    <li><a href="index.jsp">Search Products</a></li>
                                    <li class="active"><a href="ManageProductController?btAction=ShowTrackedProduct">Your Products</a></li>
                                    <li><a href="FeedbackController?btAction=ShowFeedback">Feedback</a></li>
                                    <li>______________________</li>
                                    <li> &nbsp;&nbsp;&nbsp;Member System</li>
                                </ul>
                            </div>
                            <div class="col-2 hiw">
                                <a href="home.jsp">Home</a>
                            </div>
                        </div>
                        <div class="col-2 text-center">
                            <img src="Images/PRTS.png" style="height: 80px"/>
                        </div>
                        <div id="menu-right" class="col-5">
                            <c:if test="${not empty sessionScope.ACCOUNT}">
                                <div id="dd-right">
                                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                                        <span id="username-outer">
                                            <span id="username">${sessionScope.ACCOUNT.emailAddress}</span>
                                        </span>
                                        <span class="caret"></span>
                                    </a>
                                    <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
                                        <li class="caret-up"></li>
                                        <li>
                                            <a id="profile" href="AccountController?action=updateAccountDetail">
                                                Account Preferences
                                            </a>
                                        </li>
                                        <c:if test="${sessionScope.ACCOUNT.role.roleID != 3}">
                                            <li>
                                                <a href="AdminController?btAction=LoadPage">Admin System</a>
                                            </li>
                                        </c:if>
                                        <li>
                                            <a id="history" href="MessageController?btAction=LoadReceivedMessage">
                                                Message
                                            </a>
                                        </li>
                                        <li>
                                            <a id="logout" href="HomeController?btAction=logout">
                                                Logout
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pull-right ">
                                    <a href="ManageProductController?btAction=ShowTrackedProduct">My Finds</a>
                                </div>
                            </c:if>
                        </div>
                    </div>
                </div>

                <div id="tools-wrapper">
                    <div class="row" id="sub-menu">
                        <div id="sub-menu-inner">
                        </div>
                    </div>
                    <div id="toolbar">
                        <div id="toolbar-container">
                            <ul class="nav nav-tabs">
                                <li class="tool-tabs">
                                    <a href="ManageProductController?btAction=ShowTrackedProduct" class="btn-active">my&nbsp;products</a>
                                </li>
                                <li class="tool-tabs">
                                    <a href="CollectionController?btAction=LoadAllCollection" class="btn-inactive">my&nbsp;collection</a>
                                </li>
                            </ul>
                        </div>

                        <div id="filter-tools" class="col-12 visible" style="top: 77px; height: 100px;">
                            <div id="filter-tools-container">
                                <div id="filter-positioning">

                                    <div class="pull-left sort-icons-container">
                                        <br/>
                                        <br/>
                                        Your tracked products
                                    </div>
                                    <div class="search browse-tools ">
                                        <form action="ManageProductController" method="POST" class="input-group">
                                            <div class="search-places">
                                                <div title="Now Searching in My Products" class="title">
                                                    <div>Now Searching in:</div>
                                                    <div class="place">My Products</div>
                                                </div>
                                            </div>
                                            <input type="text" value="" placeholder="Search Products by name" name="txtSearchProduct">
                                            <span class="input-group-addon">
                                                <button type="submit" value="SearchProduct" name="btAction"><i class="icon-search"></i></button>
                                            </span>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div id="content-wrapper" style="margin-top: 35px;">
                <div class="row products private-finds">
                    <div class="grid-container" style="width:95%;">
                        <ul class="col-12 grid-view" style=" margin: 80px 0 80px 0;">
                            <h3 style="color:red" align="center">${SEARCHPNOTFOUND}${DELETEPROERR}${UPDATEPRIERR}${SAVEPROERR}</h3>
                            <h3 align="center">${DELETEPROSUC}${UPDATEPRISUC}${SAVEPROSUC}${SAVEPROFAIL}</h3>

                            <br/>
                            <c:set var="productList" value="${sessionScope.SHOWTRACKEDPRODUCT}"/>
                            <c:if test="${not empty productList}">
                                <c:forEach var="rows" items="${productList}">
                                    <li class="grid-item">
                                        <div class="image-container">
                                            <a href="" class="product-link">
                                                <img src="${rows.productImage}" width="80" height="80">
                                            </a>
                                            <div class="overlayed">
                                                <c:url var="deleteProduct" value="ManageProductController">
                                                    <c:param name="btAction" value="deleteProduct"/>
                                                    <c:param name="deleteProductID" value="${rows.trackedProductId}"/>
                                                </c:url>
                                                <a href="${deleteProduct}" class="btn delete" onclick="return confirm('Do you want to delete this product?');">
                                                    <i class="icon-trash"></i>
                                                </a>
                                                <div class="button-container">
                                                    <c:url var="showDetail" value="ManageProductController">
                                                        <c:param name="btAction" value="showProductDetail"/>
                                                        <c:param name="productDetailID" value="${rows.trackedProductId}"/>
                                                    </c:url>
                                                    <a href="${showDetail}" class="btn btn-block btn-danger top view">
                                                        <i class="icon-search"></i>
                                                        &nbsp;view
                                                    </a>
                                                </div>
                                                <div class="button-container">
                                                    <a href="${rows.productLink}" class="btn btn-block btn-success buy" target="_blank">
                                                        $&nbsp;buy
                                                    </a>
                                                </div>

                                            </div>
                                            <div class="check-overlayed" style="display: none;">
                                                <i class="icon-check"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="grid-title">${rows.productName}</div>
                                        </div>
                                    </li>

                                </c:forEach>
                            </c:if>

                            <c:set var="searchproductList" value="${sessionScope.SEARCHPRODUCT}"/>
                            <c:if test="${not empty searchproductList}">
                                <c:forEach var="rows" items="${searchproductList}">
                                    <li class="grid-item">
                                        <div class="image-container">
                                            <a href="" class="product-link">
                                                <img src="${rows.productImage}" width="80" height="80">
                                            </a>
                                            <div class="overlayed">
                                                <c:url var="deleteProduct" value="ManageProductController">
                                                    <c:param name="btAction" value="deleteProduct"/>
                                                    <c:param name="deleteProductID" value="${rows.trackedProductId}"/>
                                                </c:url>
                                                <a href="${deleteProduct}" class="btn delete">
                                                    <i class="icon-trash"></i>
                                                </a>
                                                <div class="button-container">
                                                    <c:url var="showDetail" value="ManageProductController">
                                                        <c:param name="btAction" value="showProductDetail"/>
                                                        <c:param name="productDetailID" value="${rows.trackedProductId}"/>
                                                    </c:url>
                                                    <a href="${showDetail}" class="btn btn-block btn-danger top view">
                                                        <i class="icon-search"></i>
                                                        &nbsp;view
                                                    </a>
                                                </div>
                                                <div class="button-container">
                                                    <a href="${rows.productLink}" class="btn btn-block btn-success buy" target="_blank">
                                                        $&nbsp;buy
                                                    </a>
                                                </div>

                                            </div>
                                            <div class="check-overlayed" style="display: none;">
                                                <i class="icon-check"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="grid-title">${rows.productName}</div>

                                        </div>
                                    </li>
                                </c:forEach>
                            </c:if>
                            <c:if test="${empty productList && empty searchproductList}">
                                <h3 style="color: red" align="center">Sorry! You didn't track any product!!!</h3>
                            </c:if>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div id="dialog-modal" class="row top-inner" style="display: none; overflow: hidden">
            <c:set var="productdetail" value="${sessionScope.SHOWPRODUCTDETAIL}"/>
            <c:if test="${not empty productdetail}">
                <div class="left">
                    <a class="image-link" href="${productdetail.productLink}">
                        <img id="images" src="${productdetail.productImage}" />
                    </a>
                </div>
                <div class="right">
                    <div class="right">
                        <h1 class="title">${productdetail.productName}</h1>

                        <form class="row fields desired" action="ManageProductController" method="POST">
                            <c:if test="${productdetail.collection.collectionID != 14}">
                                <label class="desired-price">
                                    New Desire Price
                                </label>
                                <div>
                                    <span class="desired-errors"></span>
                                </div>
                                <div class="col-8 input-group desiredPrice">
                                    <span class="input-group-addon">$</span>
                                    <input  id="desirePrice1" name="txtNewDesiredPrice" required="" min="0" maxlength="8" value="${productdetail.desiredPrice}" type="number" step="any" />

                                </div>
                                <span class="col-4">
                                    <button class="btn btn-large btn-danger" type="submit" value="updateDesiredPrice" name="btAction" onclick="
                                        if (desirePrice1.value > productPrice.value) {
                                            alert('The desired price must be smaller than current price!!!');
                                            return false;
                                        }return confirm('Do you want to update desired price?');">
                                        <i class="icon-add"></i>&nbsp;
                                        update
                                    </button>

                                </span>

                                <div class="row fields current">
                                    <div class="col-8 price-container">
                                        <br/>
                                        ${productdetail.collection.collectionName} collection
                                    </div>
                                    <div class="col-4 current-price-available ">
                                        <a href="${productdetail.productLink}" target="_blank" class="btn btn-large btn-success buy">
                                            $&nbsp;buy
                                        </a>
                                    </div>
                                </div>
                            </c:if>

                            <c:if test="${productdetail.collection.collectionID == 14}">
                                <label class="desired-price">
                                    New Desire Price
                                </label>
                                <div>
                                    <span class="desired-errors"></span>
                                </div>
                                <div class="col-8 input-group desiredPrice">
                                    <span class="input-group-addon">$</span>
                                    <input name="txtNewDesiredPrice" id="desiredPrice2" required="" min="0" maxlength="8" value="${productdetail.desiredPrice}" type="number" step="any" />

                                </div>
                                <span class="col-4">
                                    <button class="btn btn-large btn-danger" type="submit" value="addItem" name="btAction" onclick="
                                        if (desiredPrice2.value > productPrice.value) {
                                            alert('The desired price must be smaller than current price!!!');
                                            return false;
                                        }return confirm('Do you want to update desired price?');">
                                        <i class="icon-add"></i>&nbsp;
                                        update
                                    </button>

                                </span>

                                <div class="row fields current">
                                    <div class="col-8 input-group desiredPrice">
                                        <br/>
                                        <c:set var="colList" value="${sessionScope.COLLECTION}"/>
                                        <c:if test="${not empty colList}">

                                            <select name="ddlCollectionList" style="background-color: #849BAB">
                                                <option value="">Choose a collection</option>
                                                <c:forEach var="cols" items="${colList}">
                                                    <option value="${cols.collectionName}">${cols.collectionName}</option>
                                                </c:forEach>
                                            </select>
                                        </c:if>
                                        <c:if test="${empty colList}">
                                            <a href="CollectionController?btAction=createNewCol">Create new collection</a>
                                        </c:if>

                                    </div>

                                    <div class="col-4 current-price-available ">
                                        <a href="${productdetail.productLink}" target="_blank" class="btn btn-large btn-success buy">
                                            $&nbsp;buy
                                        </a>
                                    </div>
                                </div>
                            </c:if>
                            <div class="row fields current" style="text-align: right">
                                <div class="col-8 price-container">
                                    <c:set var="currentprice" value="${sessionScope.CURRENTPRICE}" />
                                    <input type="hidden" name="productPrice" value="${currentprice}" id="productPrice"/>
                                    <c:if test="${currentprice != 0}">
                                        <label class="current-price">
                                            <span class="recent-price">current&nbsp;price</span>
                                        </label>

                                        <div class="current-price-available ">
                                            <span class="gen-append">&nbsp;&nbsp;&nbsp;$</span>
                                            <span class="gen-price">${sessionScope.CURRENTPRICE}</span>
                                        </div>
                                    </c:if>
                                    <c:if test="${currentprice == 0}">
                                        <label class="current-price">
                                            <span class="recent-price">sold&nbsp;out</span>
                                        </label>
                                    </c:if>

                                </div>
                            </div>
                            <div class="row fields original"  style="text-align: right">
                                <div class="col-8 price-container">
                                    <label class="original-price">
                                        desired&nbsp;price
                                    </label>
                                    <div>
                                        <span class="gen-append">&nbsp;&nbsp;&nbsp;$</span>
                                        <span class="gen-price">${productdetail.desiredPrice}</span>
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </c:if>
            <div class="col-12 bottom-inner" style="width: 800px;">
                <c:set var="RCMProduct" value="${sessionScope.RCMPRODUCT}"/>
                <ul class="nav nav-tabs" style="height: 55px">
                    <li class="tool-tabs active">
                        <a data-toggle="tab"  href="#chart">Price chart</a>
                    </li>
                    <c:if test="${not empty RCMProduct }">
                        <li class="tool-tabs">
                            <a data-toggle="tab" href="#recommendation">Recommendation</a>
                        </li>
                    </c:if>
                </ul>
                <div class="row tab-content" style="margin-left: -18px;height: 260.25px; width: 800px; float: left; background: rgb(235, 238, 239)">
                    <div id="chart" class="tab-pane active">
                        <div id="holder"></div>
                    </div>

                    <div id="recommendation" class="tab-pane">
                        <c:forEach var="item" items="${RCMProduct}">
                            <div style="float: left;max-height: 150px; max-width: 150px; margin:20px">
                                <a href="${item.productLink}">
                                    <img src="${item.productImage}"/>
                                    <span>${item.productName}</span>
                                </a>
                            </div>
                        </c:forEach>
                    </div>
                </div>

            </div>
        </div>
        <c:set var="phs" value="${sessionScope.PRICEHISTORIES}"/>
        <c:if test="${not empty phs}">
            <table id="data">

                <tfoot>
                    <tr>
                        <c:forEach var="item" items="${phs}">

                            <th>${item.updatedDate}</th>
                        </c:forEach>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <c:forEach var="item" items="${phs}">
                            <td>${item.price}</td>
                        </c:forEach>
                    </tr>
                </tbody>
            </table>
        </c:if>
        <% session.removeAttribute("SHOWPRODUCTDETAIL");%>
        <% session.removeAttribute("DELETEPROERR");%>
        <% session.removeAttribute("DELETEPROSUC");%>
        <% session.removeAttribute("UPDATEPRISUC");%>
        <% session.removeAttribute("UPDATEPRIERR");%>
        <% session.removeAttribute("SAVEPROSUC");%>
        <% session.removeAttribute("SAVEPROERR");%>
        <% session.removeAttribute("SAVEPROFAIL");%>
    </body>
</html>
